<template>
  <div>
    <div id="myMap" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      cityList11: [
        { label: '北京', value: 1 },
        { label: '上海', value: 2 },
        { label: '广州', value: 3 }
      ],
      reportTypeList: [
        { label: '周报', value: 1 },
        { label: '月报', value: 2 },
        { label: '年报', value: 3 }
      ],
      timeList: [
        { label: `7天`, value: 1 },
        { label: `30天`, value: 2 },
        { label: `180天`, value: 3 },
        { label: `360天`, value: 4 }
      ],
      myMap: null,
      curMapZoom: 0,
      cityList: [
        { x: 121.48, y: 31.23, name: '黄浦区', count: '1118套房', price: 3.4 },
        { x: 121.43, y: 31.18, name: '徐汇区', count: '1118套房', price: 3.4 },
        { x: 121.45, y: 31.23, name: '静安区', count: '1118套房', price: 3.4 },
        { x: 121.5, y: 31.27, name: '虹口区', count: '1118套房', price: 3.4 },
        { x: 121.4, y: 31.25, name: '普陀区', count: '1118套房', price: 3.4 },
        { x: 121.48, y: 31.4, name: '宝山区', count: '1118套房', price: 3.4 },
        { x: 121.38, y: 31.12, name: '闵行区', count: '1118套房', price: 3.4 }
      ],
      cityList2: [
        { x: 121.48, y: 31.23, name: '子集11', count: '1118套房', price: 3.4 },
        { x: 121.43, y: 3.6, name: '子集12', count: '1118套房', price: 3.4 },
        { x: 121.36, y: 31.9, name: '子集13', count: '1118套房', price: 3.4 },
        { x: 121.52, y: 32.1, name: '子集14', count: '1118套房', price: 3.4 },
        { x: 121.46, y: 32.2, name: '子集15', count: '1118套房', price: 3.4 },
        { x: 121.48, y: 32.3, name: '子集16', count: '1118套房', price: 3.4 },
        { x: 121.28, y: 32.4, name: '子集17', count: '1118套房', price: 3.4 }
      ],
      cityList3: [
        { x: 121.48, y: 31.23, name: '子集11', count: '1118套房', price: 3.4 },
        { x: 121.43, y: 3.6, name: '子集12', count: '1118套房', price: 3.4 },
        { x: 121.36, y: 31.9, name: '子集13', count: '1118套房', price: 3.4 },
        { x: 121.52, y: 32.1, name: '子集14', count: '1118套房', price: 3.4 },
        { x: 121.46, y: 32.2, name: '子集15', count: '1118套房', price: 3.4 },
        { x: 121.48, y: 32.3, name: '子集16', count: '1118套房', price: 3.4 },
        { x: 121.28, y: 32.4, name: '子集17', count: '1118套房', price: 3.4 }
      ]
    }
  },
  mounted() {
    this.tempCityList()
    this.initMap()
  },
  methods: {
    tempCityList() {
      const arr = [

        { name: '北京', value: ['116.3979471', '39.9081726', 78] },

        { name: '上海', value: ['121.4692688', '31.2381763', 75] },

        { name: '天津', value: ['117.2523808', '39.1038561', 95] },

        { name: '重庆', value: ['106.548425', '29.5549144', 78] },

        { name: '河北', value: ['114.4897766', '38.0451279', 42] },

        { name: '山西', value: ['112.5223053', '37.8357424', 90] },

        { name: '辽宁', value: ['123.4116821', '41.7966156', 96] },

        { name: '吉林', value: ['125.3154297', '43.8925629', 46] },

        { name: '黑龙江', value: ['126.6433411', '45.7414932', 97] },

        { name: '浙江', value: ['120.1592484', '30.265995', 32] },

        { name: '福建', value: ['119.2978134', '26.0785904', 2] },

        { name: '山东', value: ['117.0056', '36.6670723', 32] },

        { name: '河南', value: ['113.6500473', '34.7570343', 23] },

        { name: '湖北', value: ['114.2919388', '30.5675144', 76] },

        { name: '湖南', value: ['112.9812698', '28.2008247', 71] },

        { name: '广东', value: ['113.2614288', '23.1189117', 6] },

        { name: '海南', value: ['110.3465118', '20.0317936', 64] },

        { name: '四川', value: ['104.0817566', '30.6610565', 54] },

        { name: '贵州', value: ['106.7113724', '26.5768738', 1] },

        { name: '云南', value: ['102.704567', '25.0438442', 78] },

        { name: '江西', value: ['115.8999176', '28.6759911', 16] },

        { name: '陕西', value: ['108.949028', '34.2616844', 14] },

        { name: '青海', value: ['101.7874527', '36.6094475', 22] },

        { name: '甘肃', value: ['103.7500534', '36.0680389', 37] },

        { name: '广西', value: ['108.3117676', '22.8065434', 52] },

        { name: '新疆', value: ['87.6061172', '43.7909393', 11] },

        { name: '内蒙古', value: ['111.6632996', '40.8209419', 56] },

        { name: '西藏', value: ['91.1320496', '29.657589', 6] },

        { name: '宁夏', value: ['106.2719421', '38.4680099', 64] },

        { name: '台湾', value: ['120.9581316', '23.8516062', 49] },

        { name: '香港', value: ['114.139452', '22.391577', 49] },

        { name: '澳门', value: ['113.5678411', '22.167654', 36] },

        { name: '安徽', value: ['117.2757034', '31.8632545', 78] },

        { name: '江苏', value: ['118.7727814', '32.0476151', 98] }
      ]
      const list = []
      arr.forEach((item, index) => {
        const obj = {
          x: Number(item.value[0]),
          y: Number(item.value[1]),
          name: item.name,
          count: `${item.value[2]}套房`,
          price: 3.4
        }
        list.push(obj)
      })
      return list
    },
    async initMap() {
      this.myMap = new BMap.Map('myMap', {
        minZoom: 6,
        maxZoom: 6
      }) // 初始化map, 绑定id=allmap
      const point = new BMap.Point(121.445, 31.213) // 初始化point, 给定一个默认x,y值
      this.myMap.centerAndZoom(point, 12) // 将point点放入map中，展示在页面中心展示，10=缩放程度
      this.myMap.enableScrollWheelZoom(true) // 开启滚动鼠标滑轮
      const scaleCtrl = new BMap.ScaleControl() // 添加比例尺控件
      this.myMap.addControl(scaleCtrl)
      this.myMap.addControl(new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_ZOOM
      }))
      this.setRectangleMarkerFun(this.tempCityList())
      this.myMap.addEventListener('zoomend', (e) => {
        this.curMapZoom = this.myMap.getZoom()
        if (this.curMapZoom > 0 && this.curMapZoom < 10) {
          this.myMap.clearOverlays()
          this.setRoundMarkerFun(this.cityList2)
        }
        if (this.curMapZoom === 6) {
          this.myMap.clearOverlays()
          const list3 = this.tempCityList()
          this.setRoundMarkerFun(list3)
        }
        if (this.curMapZoom === 14) {
        }
      })
    },
    setRoundMarkerFun(list, point, zoom) {
      if (point) {
        const point = new BMap.Point(point.lat, point.lng) // 初始化point, 给定一个默认x,y值
        this.myMap.centerAndZoom(point, zoom) // 将point点放入map中，展示在页面中心展示，10=缩放程度
      }
      if (list.length > 0) {
        list.forEach((item, index) => {
          // 创建point, 将x,y值传入
          const pointNumber = new BMap.Point(item.x, item.y)
          const label = new BMap.Label()
          label.setContent(
            `<div class="my-temp">
                    <p> ${item.name}</p>
                    <p>${item.price}万</p>
                      <p>${item.count}</p>
                  </div>`
          )
          label.setStyle({
            color: 'black', // 字体颜色
            fontSize: '13px', // 字体大小
            backgroundColor: '#369357', // 文本标注背景颜色
            borderRadius: '50%',
            border: '0',
            textAlign: 'center',
            fontWeight: 'bold',
            width: '80px',
            height: '80px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            overflow: 'hidden'
          })
          this.markerFun(pointNumber, label, item)
        })
      }
    },
    setRectangleMarkerFun(list, point, zoom) {
      if (point) {
        const point = new BMap.Point(point.lat, point.lng) // 初始化point, 给定一个默认x,y值
        this.myMap.centerAndZoom(point, zoom) // 将point点放入map中，展示在页面中心展示，10=缩放程度
      }
      if (list.length > 0) {
        list.forEach((item, index) => {
          // 创建point, 将x,y值传入
          const pointNumber = new BMap.Point(item.x, item.y)
          const label = new BMap.Label()
          label.setContent(
            `<div class="my-temp">
                    <span> ${item.name}</span>
                      <span class="count">${item.count}</span>
                      <span class="price">${item.price}万</span>
                  </div>`
          )
          label.setStyle({
            color: '#fff', // 字体颜色
            fontSize: '13px', // 字体大小
            backgroundColor: '#369357', // 文本标注背景颜色
            borderRadius: '16px',
            border: '0',
            padding: '6px 8px',
            textAlign: 'center',
            fontWeight: 'bold',
            height: '32px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            overflow: 'hidden'
          })
          this.markerFun(pointNumber, label, item)
        })
      }
    },

    markerFun(points, label, item) {
      const myIcon = new BMap.Icon('/static/one.jpg', new BMap.Size(1, 1))
      const markers = new BMap.Marker(points, { icon: myIcon })
      this.myMap.addOverlay(markers) // 将标注添加到地图中
      markers.setLabel(label) // 将data中的name添加到地图中
      // 标注的点击事件
      label.addEventListener('click', (event) => {
        this.myMap.removeOverlay(markers)
        this.myMap.clearOverlays()
        // myMap.openInfoWindow( points);//参数：窗口、点  根据点击的点出现对应的窗口
        this.myMap.centerAndZoom(points, 16)

        // let ptdata = [
        //   {x: 121.4, y: 31.2456, name: "普陀一区<br/>102套"},
        //   {x: 121.4, y: 31.26, name: "普陀二区<br/>103套"},
        //   {x: 121.4, y: 31.2645, name: "普陀三区<br/>120套"},
        //   {x: 121.43, y: 31.18, name: "徐汇一区<br/>120套"},
        //   {x: 121.43, y: 31.19, name: "徐汇二区<br/>120套"},
        // ];
        // ptdata.forEach((e, i) => {
        //   // 创建point, 将x,y值传入
        //   let ptpointNumber = new BMap.Point(e.x, e.y);
        //
        //   // 将data中的name加入地图中
        //   let ptlabel = new BMap.Label(e.name);
        //   ptlabel.setStyle({
        //     color: "black", //字体颜色
        //     fontSize: "13px", //字体大小
        //     padding: "15px 8px",
        //     backgroundColor: "white", //文本标注背景颜色
        //     borderRadius: "50px",
        //     border: "0",
        //     textAlign: "center",
        //     fontWeight: "bold" //字体加粗
        //   });
        //   this.ptmarkerFun(ptpointNumber, ptlabel);
        // });
      })
      label.addEventListener('mouseover', (e) => {
        label.setStyle({
          color: '#fff',
          backgroundColor: 'rgba(255,69,0,0.7)' // 文本标注背景颜色
        })
      })
      label.addEventListener('mouseout', (e) => {
        label.setStyle({
          color: 'black', // 字体颜色
          backgroundColor: '#369357' // 文本标注背景颜色
        })
      })
    },
    ptmarkerFun(ptpoints, ptlabel) {
      const ptmyIcon = new BMap.Icon(
        '/static/one.jpg',
        new BMap.Size(1, 1)
      )
      const ptmarkers = new BMap.Marker(ptpoints, { icon: ptmyIcon })
      // let ptmarkers = new BMap.Marker(ptpoints);
      this.myMap.addOverlay(ptmarkers) // 将标注添加到地图中
      ptmarkers.setLabel(ptlabel) // 将data中的name添加到地图中
    },
    // 获取当前地图的中心点
    getMapCenter(point) {
      if (point) {
        return point
      } else {
        const obj = this.myMap.getCenter()
        obj.lng = obj.lng.toFixed(5)
        obj.lat = obj.lat.toFixed(5)
        return obj
      }
    }
  }
}

</script>

<style lang="scss" scoped>
#myMap {
  height: 600px;
  width: 100%;
  overflow: hidden;
}
</style>
